<template>
  <h1>员工列表练习</h1>
  姓名：<input type="text" v-model="emp.name" placeholder="请输入员工姓名"><br>
  工资：<input type="text" v-model="emp.salary" placeholder="请输入员工工资"><br>
  岗位：<input type="text" v-model="emp.job" placeholder="请输入员工岗位"><br>
  <button @click="add">添加</button>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <th>员工编号</th>
      <th>员工姓名</th>
      <th>员工工资</th>
      <th>员工岗位</th>
    </tr>
    <tr v-for="(item, index) in list">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.salary}}</td>
      <td>{{item.job}}</td>
    </tr>
  </table>
</template>


<script setup>
import {ref} from "vue";

const emp = ref({name:'',salary:'',job:''});
// const name = ref('');
// const salary = ref('');
// const job = ref('');
const list = ref([]);

const add = () => {
  if (emp.value.name=='' || emp.value.salary=='' || emp.value.job==''){
    alert('请输入员工信息');
    return;
  }
  list.value.push(emp.value);
  // list.value.push({
  //   name:name.value,
  //   salary:salary.value,
  //   job:job.value
  // });
  emp.value = {name:'',salary:'',job:''};
  // name.value = '';
  // salary.value = '';
  // job.value = '';
}
</script>


<style scoped>
</style>